<template>
	<div id="super-admin">
		<h6 style="font-size: 16px;text-align: center;">管理员审核</h6>
		<table class="temp-list" style="width: 100%;">
			<tr>
				<td>模板名称:</td>
				<td><span>{{templateData.TemplateName}}</span></td>
			</tr>
			<tr>
				<td><span>作者:</span></td>
				<td><span>{{templateInfo.Author}}</span></td>
			</tr>
			<tr>
				<td><span>模板编号:</span></td>
				<td><span>{{templateInfo.TemplateNumber}}</span></td>
			</tr>
			<tr 
				v-for="(item,i) in templateData.filters" :key="i"
			>
				<td class="temp-list">{{item.Name}}:</td>
				<td class="temp-list-item">
					<div v-for="(filter, j) in item.FilterValues" :key="j">
						<!-- -->
						<div v-if="filter.isSelected" style="padding:5px 5px 5px 0;">
							<span v-if="filter.DisplayMode == 0">{{filter.Name}}</span>
							<img v-else :src="$store.state.port.ossPath + filter.ImageUrl" alt="">
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td><span>关键词:</span></td>
				<td><span>{{templateData.Keywords && templateData.Keywords.join(' , ')}}</span></td>
			</tr>
			<tr>
				<td>模板介绍:</td>
				<td><span style="word-break:break-all; ">{{templateData.Content}}</span></td>
			</tr>
		</table>
		<div>
			<el-button  @click="position.show = !position.show">修改提交信息</el-button>
			<el-button  @click="submitShow = !submitShow">提交模板</el-button>
		</div>
		<!-- 提交模板信息 -->
		<transition name="animation-scale">
			<div v-if="submitShow" class="model-dialog">
				<div style="background: #fff;min-width: 850px;border-radius: 10px;padding: 10px;position: absolute;left: 200px;top: 100px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .6);" 
				ref="submitTemplate" 
				@mousedown.stop="handledown">
					<div @mousedown.stop class="close-btn" style="top:0;right: -55px;" @click="submitShow = false"></div>
					<TempSubmit
						
						:faceImg="templateData.FacePicture"
						@toggleDialog="submitShow = false" 
						:ProductTypeId="templateInfo.ProductType.TypeId" 
						:TemplateNumber="templateInfo.TemplateNumber" 
						:tempName="templateInfo.Name"></TempSubmit>
				</div>
			</div>
		</transition>
		
		<!-- 修改模板信息 -->
		<transition name="animation-scale">
			<div class="put-template"
				v-if="position.show"
				ref="putTemplate"
			>
				<div style="position: relative; text-align: center;font-size: 18px;padding: 10px 0;background: #909399;color: #fff; cursor: move;"
					@mousedown.stop="handledown"
					title="按下拖拽"
				>
					<span>修改提交信息</span>
					<div title="关闭" class="close-btn" style="top: 0" @mousedown.stop @click="position.show = false"></div>
					
				</div>
				<div class="template-content">
					<div class="info">
						<div class="info-item">
							<div class="item-title">模板名称:</div>
							<div class="item-right">
								<el-input size="small" v-model="templateData.TemplateName"></el-input>
							</div>
						</div>

						<div class="info-item"
							v-for="(item, i) in templateData.filters" :key="i"
						>
							<div class="item-title">{{item.Name}}</div>
							<div class="item-right">
								<el-select 
									v-model="FilterVaules[i]" 
									:multiple-limit="3"
									size='medium'
									multiple placeholder="请选择">
									
									<el-option
									v-for="filter in item.FilterValues"
									:key="filter.ValueId"
									:label="filter.Name"
									:value="filter.ValueId">
									<img
										v-if="filter.DisplayMode == 1" 
										:src="$store.state.port.ossPath + filter.ImageUrl" alt="">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="info-item">
							<div class="item-title">关键词标签:</div>
							<div class="item-right lable-content">
								<div>
									<span class="lable-item"
										v-for="(item, i) in templateData.Keywords" :key="item" 
										@click="delKeywords(i)"
									>{{item}}<span class="label-close"></span></span>
								</div>
								<input 
								@keydown.enter="addKeywords"
								@blur="addKeywords"
								ref="keyInput" 
								class="lable-input" />
							</div>
						</div>
						<div class="info-item">
							<div class="item-title">模板介绍:</div>
							<div class="item-right">
								<el-input
								type="textarea"
								:autosize="{ minRows: 2}"
								placeholder="请输入内容"
								v-model="templateData.Content">
								</el-input>
							</div>
						</div>
					</div>
					<div class="cover">
						<p>模板封面</p>
						<div style="position: relative;">
							<img title="点击预览"
							v-if="templateData.FacePicture"
							@load="uploadProgress = 0"
							@click="previewImg = true" style="width: 100%;cursor:pointer;" 
							:src="$store.state.port.ossPath + templateData.FacePicture + '?v=' + new Date().getTime()">
							<div v-if="uploadProgress" style="position: absolute;bottom: 0;width: 100%;height: 26px;line-height: 26px;text-align: center">{{uploadProgress}}%</div>
							<div v-if="uploadProgress" class="upload-progress" :style="`width: ${uploadProgress}%`"></div>
							<div v-else class="submit-btn" style="padding: 7px 15px;" @click="uploadFacePicture">上传封面</div>
                            <el-button size="mini" class="submit-btn" 
                                :loading="autoProductionFace.loading"
                                @click="handleAuto"
                            >{{autoProductionFace.msg}}</el-button>
                            <el-input v-if="templateInfo.TypeId == 74" type="number" size="mini" v-model="autoProductionFace.x" placeholder="产品为纸杯可用,输入x轴值"/>
						</div>
					</div>
				</div>
				<div class="template-bottom">
					<div class="submit-btn" @click="submitTemplate">提交</div>
				</div>
			</div>
		</transition>
		<!-- el-zoom-in-center -->
		<div></div>
		<transition name="el-fade-in-linear">
			<div class="img-preivew" v-if="previewImg" @click="previewImg = false" title="点击收起"></div>
		</transition>
		<transition name="scale">
			<div class="img-preivew animation-img" v-if="previewImg" @click="previewImg = false" title="点击收起">
				<img v-if="templateData.FacePicture" :src="$store.state.port.ossPath + templateData.FacePicture + '?v=' + new Date().getTime()" alt="">
			</div>
		</transition>
		<div style="margin-top: 30px;">
			<!-- <el-button type="danger" @click="superBtn">全选</el-button> -->
			<!-- <el-button type="success" @click="dingchang">丁唱</el-button> -->
			<el-button type="success" @click="dingchang2">一键解锁</el-button>
			<el-button type="success" @click="dingchangDasan">一键打散</el-button>
			<!-- <div style="width:100px;">
				<el-input type="number" min='1' resize="both" v-model="size"></el-input>
			</div> -->
		</div>

        <transition name="animation-scale">
            <div class="model-dialog" v-show="autoProductionFace.loading">
                <div class="model-mask-active"></div>
                <div class="model-content">
                    <div class="admin-model-content" style="height: 800px;overflow:scroll"
                        v-loading="autoProductionFace.draw"
                    >
                        <canvas width="500" height="500" ref="autoProductionCanvas"></canvas>
                    </div>
                    <div class="model-btns">
                        <div><el-button @click="handleCancel">取消</el-button></div>
                        <div style="height: 15px;"></div>
                        <div><el-button type="primary" @click="handleok">确定</el-button></div>
                    </div>
                </div>
            </div>
        </transition>
	</div>
</template>

<script>
import TempSubmit from '@/components/designer/TempSubmit.vue'
export default {
	name: 'super-admin',
	components: {
		TempSubmit
	},
	props: {
		templateInfo: {
			type: Object
		},
		PageData: {
			type: Array
		}
	},
	data() {
		let params = this.$route.params.t
		params = window.atob(params)
		let tempId = params.split('&')[0].split('=')[1];
		return {
			bonusPoint: 1, // 积分
			rejectText: '', // 拒绝理由
			toggle: '', // 切换
			tempId, // 模板ID
			isSucces: false, // 是否通过
			isPutaway: true, // 是否上架
			size: 15.4, // 比例
			isSubmitState: true, // 是否提交过
			submitShow: false, // 提交组件的显示
			position: { // 移动记录时间
				show: false,
				move: false,
				x: 0,
				y: 0,
				left: 380,
				top: 85,
				ele: null
			},
			templateData: {
				ID: null,//提交记录的ID
				FilterVaules: null,//属性实际ID,逗号隔开
				StrThematic: null,//所属专题
				Keywords: null,//关键词
				Content: null,//内容
				TemplateName: null,//模板名称 
				FacePicture: null,//封面
				TemplateNumber: null, //模板编号
				filters: [],
			}, // 模板数据
			FilterVaules: [], // 分类选择
			isSubmit: true, // 是否提交过 
			previewImg: false, // 展示大的缩略图
            uploadProgress: 0, // 上传进度
            autoProductionFace: { // 自动生成封面参数
                loading: false,
                msg: '自动生成',
                draw: true,
                list: [78],
                x: -509
            },
            nowTemplate: {
                needFace: true
            }
		}
	},
	methods: {
        getNowTemplate() { // 获取模板的提交参数
            this.$axios.get('/ProductTypeFilter?productTypeID=' + this.templateInfo.TypeId)
            .then(({data}) => {
                console.log(data)
                this.nowTemplate = data;
            })
        },
		getState(type) { // 获取模板信息
			return new Promise((resolve, reject) => {
				var formData = new FormData()
                formData.append('action', type);
				formData.append('templatenum', this.templateInfo.TemplateNumber);
				this.$axios.post('/UpperShelfTemplate', formData)
				.then(({data}) => {
                    if(data.state == 'ok') {
						this.isPutaway = !this.isPutaway;
						this.$message.success(data.msg)
						resolve(true)
                    }else{
						this.$message.error(data.msg)
						reject(true)
                    }
                })
			})
		},
		superBtn() { // 回退元素
			// console.log(this.templateInfo)
			this.$emit('superBtn')
		},
		dingchang() {
			this.$emit('dingchang', this.size)
		},
		dingchang2() {
			this.$emit('dingchang2')
		},
		dingchangDasan() {
			this.$emit('dingchangDasan')
		},
		handledown(e) {
			console.log(e)
			let ele = this.$refs.putTemplate || this.$refs.submitTemplate;
			this.position.move = true;
			this.position.x = e.clientX;
			this.position.y = e.clientY;
			this.position.left = ele.offsetLeft;
			this.position.top = ele.offsetTop;
			this.position.ele = ele;
			window.addEventListener('mousemove', this.handleMove)
			window.addEventListener('mouseup', this.handleUp)
		},
		handleMove(e) {
			if (!this.position.move) return;
			let _x = e.clientX - this.position.x,
				_y = e.clientY - this.position.y;
			this.position.ele.style.left = this.position.left + _x + 'px';
			this.position.ele.style.top = this.position.top + _y + 'px';
		},
		handleUp() {
			this.position.move = false
			window.removeEventListener('mousemove', this.handleMove)
			window.removeEventListener('mouseup', this.handleUp)
		},
		
		delKeywords(i) { // 删除关键词
			this.templateData.Keywords.splice(i, 1)
		},
		addKeywords() { // 添加关键词
			let keyword = this.$refs.keyInput.value;
			if (keyword) {
				let arr = keyword.split(' ')
				arr.forEach(key => {
					key && this.templateData.Keywords.push(key)
				})
			}
			this.$refs.keyInput.value = ''
		},
		uploadFacePicture() { // 上传封面
			let input = document.createElement('input');
			input.accept= 'image/*';
			input.type = 'file';
			input.click();
			input.onchange = () => {
				let file = input.files[0], 
					formData = new FormData();
				formData.append('file', file);
				let timer = setInterval(()=> {
					this.uploadProgress++;
					if (this.uploadProgress == 95) {
						clearInterval(timer)
					}
				}, 100)
				this.$axios.post(this.$store.state.port.netServer + '/UploadToOSS', formData)
				.then(({data}) => {
					input = null;
					if (data.status == 'ok') {
						clearInterval(timer)
						this.templateData.FacePicture = data.key;
					}
				})
				.catch(err => {
					this.uploadProgress = 0;
					clearInterval(timer);
					this.handleprompt('服务器出错, 请稍后再试')
				})
			}
		},
		handleprompt(message, type) { // 提示
			this.$message.closeAll();
			this.$message({message, type, customClass: 'info'});
		},
		submitTemplate() { // 提交修改的模板信息
			// console.log(this.templateData)
			if (!this.isSubmit) return this.handleprompt("正在处理,请稍后再试", 'warning');
			if (!this.templateData.TemplateName) return this.handleprompt('没有模板名称', 'warning');
			if (this.FilterVaules.length && this.FilterVaules.join('') == '') return this.handleprompt('没有选择分类信息', 'warning');
			if (!this.templateData.FacePicture) return this.handleprompt('没有上传封面', 'warning');
			let arr = ['ID', 'StrThematic', 'Keywords', 'Content', 'TemplateName', 'FacePicture', 'TemplateNumber'],
                formData = new FormData();
            let filter = this.FilterVaules.filter( function(n) { return n}).join(',')
            if (filter.lastIndexOf(',') == filter.length - 1) filter = filter.slice(0, -1)
			formData.append('FilterVaules', filter)
			for(let key in arr) {
				if (arr[key] == 'Keywords') {
                    let keyword = this.templateData[arr[key]].filter( function(n) { return n}).join(',')
                    if (keyword.lastIndexOf(',') == keyword.length - 1) keyword = keyword.slice(0, -1)
					formData.append(arr[key], keyword)
                }else {
					formData.append(arr[key], this.templateData[arr[key]])
				}
			}
			this.isSubmit = false;
			this.$axios.put(this.$store.state.port.netServer + '/DesignerSubmitTemplate', formData)
			.then(({data}) => {
				this.isSubmit = true;
				this.position.show = false;
				if (data == 'Success') this.handleprompt('修改成功', 'success');
			})
			.catch(err => {
				this.isSubmit = true; 
				this.position.show = false;
				this.handleprompt('服务器出错, 请稍后再试')
			})
		},
		getValue(data) {
			let arr = [];
			if (data) {
				data.forEach(item => {
					arr.push(item.FilterValue)
				})
				return arr.join(',');
			}
			return '';
		},
		parsing(data) { // 解析
            let arr = [], filterVlaue = data.SubTemplate.FilterValues && data.SubTemplate.FilterValues.split(',') || [];
            console.log(data, 'admin')
            if(!data.StrFilters) return arr
			data.StrFilters.forEach(item => {
				item.FilterValues.forEach((filter, j) => {
					if (filterVlaue.indexOf(String(filter.ValueId)) > -1) {
						filter.isSelected = true;
					} else {
						filter.isSelected = false;
					}
				})
				arr.push(item)
			})
			// console.log(arr)
			return arr;
		},
		reparsing(data) { // 泛解析
			let arr = [];
			data.forEach((item, i) => {
				this.FilterVaules.push([])
				item.FilterValues.forEach(filter => {
					// console.log(filter)
					if (filter.isSelected) {
						arr.push(filter.ValueId)
						this.FilterVaules[i].push(filter.ValueId)
					}
				})
			})
			// console.log(this.FilterVaules)
			return arr
        },
        handleAuto() { // 自动生成
            if (!this.nowTemplate.NeedFacePic) {
                let img = this.templateInfo.TemplatePages[0].Thumb.replace('http://img.aliyin.com/', '')
                this.templateData.FacePicture = img
                return
            }
            /* [78:会员卡, 47:食品酒水单, 25:宣传单, 26:印刷海报, 27:三折页, 28:易拉宝, 29:X展架 ,  
                32: 代金券, 35: 停车卡, 36:入场券, 38:广告扇, 40:挂画, 41:笔记本, 70: 信纸, 71:信封, 
                72:便签, 73:授权书, 74: 纸杯]
            */
            let list = [78, 47, 25, 26, 27, 28, 29, 30, 32, 35, 36, 38, 40, 41, 70, 71, 72, 73, 74];
            console.log(list)
            if(list.indexOf(this.templateInfo.TypeId) == -1) {
                console.log(this.templateInfo.TypeId)
                this.$message.closeAll();
                this.$message({
                    type: 'warning',
                    message: '此产品不支持自动生成',
                    center: true
                })
                return 
            }
            this.autoProductionFace.loading = true;
            let canvas = this.$refs.autoProductionCanvas;
            let ctx = canvas.getContext("2d");
 
            if (this.templateInfo.TypeId == 78) {//[78:会员卡,]
                
                this.drawPictures('/yangji/pvc.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            this.drawPictures(item.Thumb).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 120, 98, 760, 490);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 120, 639, 760, 490);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.autoProductionFace.draw = false
                        
                    })
                })
            } 
            if (this.templateInfo.TypeId == 47 || this.templateInfo.TypeId == 25) { // [47:食品酒水单, 25:宣传单]
                this.drawPictures('/yangji/shiping.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    let arr = JSON.parse(JSON.stringify(this.templateInfo.TemplatePages))
                    arr.reverse();
                    Promise.all(Array.from(arr).map((item, index) => {
                        return new Promise(resolve => {
                            this.drawPictures(item.Thumb).then(img => {
                                resolve(img)
                            })
                        })
                    })).then(arr => {
                        arr.forEach((img, i) => {
                            if (i == 0 ) {
                                ctx.drawImage(img, 276, 120, 604, 814);
                            }
                            if (i == 1) {
                                ctx.drawImage(img, 120, 169, 604, 814);
                            }
                        }) 
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if(this.templateInfo.TypeId == 26) { // 印刷海报
                this.drawPictures('/yangji/haibao.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            this.drawPictures(item.Thumb).then(img => {
                                resolve(img)
                            })
                        })
                    })).then(arr => {
                        ctx.drawImage(arr[0], 120, 120, 760, 1029);
                        this.drawPictures('/yangji/haibaojiazi.png').then(img => {
                            ctx.drawImage(img, 202, 0, 595, 137);
                        }) 
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if (this.templateInfo.TypeId == 27) { // 三折页
                if(this.templateInfo.Size.ID == 59) {
                    this.drawPictures('/yangji/A4sanzhe.png').then(img => {
                        canvas.width = img.width
                        canvas.height = img.height
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        this.drawPictures(this.templateInfo.TemplatePages[0].Thumb).then(img => {
                            ctx.drawImage(img, 120, 120, 760, 564);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else {
                    this.handleOut();
                }

            }
            if (this.templateInfo.TypeId == 28) { //易拉宝
                this.drawPictures('/yangji/yilabao.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    let src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 135, 142, 733, 1834);
                        this.autoProductionFace.draw = false
                    })
                })
            }
            if (this.templateInfo.TypeId == 29) { // x展架
                if (this.templateInfo.SizeId == 63) {
                    this.drawPictures('/yangji/Xzhanjiasmall.png').then(img => {
                        canvas.width = img.width
                        canvas.height = img.height
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        let src = this.templateInfo.TemplatePages[0].Thumb;
                        if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                        this.drawPictures(src).then(img => {
                            ctx.drawImage(img, 188, 165, 622, 1653);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else {
                    this.handleOut();
                }
            }
            if (this.templateInfo.TypeId == 30) { // 门型展架
                this.drawPictures('/yangji/menxingzhanjia.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    let src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 191, 172, 621, 1394);
                        this.drawPictures('/yangji/menxingzhanjiakuang.png').then(img => {
                            ctx.drawImage(img, 33, 120, 941, 1588);
                            this.autoProductionFace.draw = false
                        })
                        
                    })
                })
            }
            if (this.templateInfo.TypeId == 32) { // 代金券
                this.drawPictures('/yangji/daijinjuan.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            this.drawPictures(item.Thumb).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 120, 132, 760, 245);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 120, 462, 760, 245);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if (this.templateInfo.TypeId == 35) { // 停车卡
                this.drawPictures('/yangji/tingcheka.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            this.drawPictures(item.Thumb).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 128, 120, 745, 259);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 128, 423, 745, 259);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if (this.templateInfo.TypeId == 36) { // 入场券
                this.drawPictures('/yangji/ruchaungjuan.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            this.drawPictures(item.Thumb).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 120, 120, 760, 317);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 120, 497, 760, 317);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.autoProductionFace.draw = false
                        
                    })
                })
            }
            if (this.templateInfo.TypeId == 38) { // 广告扇
                this.drawPictures('/yangji/guanggaoshan.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    let src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 120, 120, 762, 1245);
                        this.drawPictures('/yangji/guanggaoshan.png').then(img => {
                            ctx.drawImage(img, 0, 0, img.width, img.height);
                            this.autoProductionFace.draw = false
                        })
                        
                    })
                })
            }
            if (this.templateInfo.TypeId == 40) { // 挂画
                this.drawPictures('/yangji/guahua.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    let src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 140, 140, 721, 1021);
                        this.autoProductionFace.draw = false
                    })
                })
            }
            if (this.templateInfo.TypeId == 41) { // 笔记本
                this.drawPictures('/yangji/bijibenbg.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    Promise.all(Array.from(this.templateInfo.TemplatePages).map((item, index) => {
                        return new Promise(resolve => {
                            this.drawPictures(item.Thumb).then(img => {
                                if (index == 0 ) {
                                    ctx.drawImage(img, 500, 120, 380, 575);
                                }
                                if (index == 1) {
                                    ctx.drawImage(img, 120, 120, 380, 575);
                                }
                                resolve()
                            })
                        })
                    })).then(() => {
                        this.drawPictures('/yangji/bijiben.png').then(img => {
                            ctx.drawImage(img, 0, 0, img.width, img.height);
                            this.autoProductionFace.draw = false
                        })
                        
                    })
                })
            }
            if (this.templateInfo.TypeId == 70) { // 信纸
                this.drawPictures('/yangji/xingzhi.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    let src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 120, 120, 709, 943);
                        this.autoProductionFace.draw = false
                    })
                })
            }
            if (this.templateInfo.TypeId == 71) { // 信封
                if(this.templateInfo.SizeId == 10) {
                    canvas.width = 1000
                    canvas.height = 778
                    let src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        ctx.drawImage(img, 87, -59, 826, 1166);
                        this.drawPictures('/yangji/7haoxingfeng.png').then(img => {
                            ctx.drawImage(img, 0, 0, img.width, img.height);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else {
                    this.handleOut();
                }
            }
            if (this.templateInfo.TypeId == 72) { // 便签
                this.drawPictures('/yangji/bianqian.png').then(img => {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    let src = this.templateInfo.TemplatePages[0].Thumb;
                    if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                    this.drawPictures(src).then(img => {
                        if(this.templateInfo.SizeId == 88) { // A5
                            ctx.drawImage(img, 224, 179, 553, 826);
                        } else if(this.templateInfo.SizeId == 12) { // A4
                            ctx.drawImage(img, 131, 120, 695, 943);
                        }
                        this.autoProductionFace.draw = false
                    })
                })
            }
            if (this.templateInfo.TypeId == 73) { // 授权书
                if(this.templateInfo.SizeId == 14) {
                    this.drawPictures('/yangji/shouquanshushuban.png').then(img => {
                        canvas.width = img.width
                        canvas.height = img.height
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        let src = this.templateInfo.TemplatePages[0].Thumb;
                        if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                        this.drawPictures(src).then(img => {
                            ctx.drawImage(img, 231, 120, 538, 760);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else if(this.templateInfo.SizeId == 15) {
                    this.drawPictures('/yangji/shouquanshuhengban.png').then(img => {
                        canvas.width = img.width
                        canvas.height = img.height
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        let src = this.templateInfo.TemplatePages[0].Thumb;
                        if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                        this.drawPictures(src).then(img => {
                            ctx.drawImage(img, 120, 232, 760, 537);
                            this.autoProductionFace.draw = false
                        })
                    })
                } else {
                    this.handleOut();
                }
                
            }
            if(this.templateInfo.TypeId == 74) { // 纸杯
                canvas.width = 1000
                canvas.height = 1229
                let src = this.templateInfo.TemplatePages[0].Thumb;
                if (src.indexOf('http') == -1) src = this.$store.state.port.ossPath + src;
                this.drawPictures(src).then(img => {
                    let x = this.autoProductionFace.x;
                    ctx.drawImage(img, x, 208, 2019, 866);
                    this.drawPictures('/yangji/zhibei.png').then(img => {
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        this.autoProductionFace.draw = false
                    })  
                    
                })
            }
            console.log(this.templateInfo)
        },
        handleCancel () { // 取消
            this.autoProductionFace.loading = false;
            this.autoProductionFace.draw = true
        },
        handleok() { // 确定
            let canvas = this.$refs.autoProductionCanvas;
            this.autoUploadCover(canvas)
        },
        
        autoUploadCover: function(canvas) { // 自动上传封面
            try {
                canvas.toBlob(data=> { // canvas to blob
                var formData = new FormData();
                formData.append('file', data, new Date().getTime() + '.png')
                this.$axios.post( this.$store.state.port.netServer + '/UploadToOSS', formData)
                .then(({data}) => {
                    if (data.status == 'ok') {
                        this.templateData.FacePicture = data.key
                        this.$message.closeAll();
                        this.$message({
                            type: 'success',
                            message: '自动生成成功',
                            center: true
                        })
                        this.autoProductionFace.loading = false
                        setTimeout(() => this.autoProductionFace.draw = true, 100)
                    }
                })
                .catch(err => {
                    alert('自动生成图片失败,请手动上传!')
                    this.autoProductionFace.loading = false
                    setTimeout(() => this.autoProductionFace.draw = true, 100)
                })
            })
            } catch (error) {
                alert('自动生成图片失败,请手动上传!')
            }
            
        },
        handleOut() { // 不符合要求
            this.$message.closeAll();
            this.$message({
                type: 'warning',
                message: '当前产品的尺寸不符合自动生成的要求!',
                center: true
            })
            this.autoProductionFace.loading = false;
        },
        drawPictures: function (src) {// 绘制图片
            return new Promise(resolve => {
                let img = new Image();
                img.crossOrigin = 'anonymous';
                img.onload = () => {
                    resolve(img);
                }
                img.onerror = () => {
                    resolve(img);
                }
                img.src = src + '?v=' + new Date().getTime();
            })
        },
	},
	mounted() {
		let data;
		try {
			data = JSON.parse(JSON.stringify(this.templateInfo));
		} catch (error) {
			data = ''
		}
		console.log(data,data.SubTemplate)
		if (!data) return;
		if(!data.IsUpperShelf && !data.SubTemplate) {
			this.isSubmitState = false;
		}
		if (data.IsPublic || !data.SubTemplate) {
			data.SubTemplate = {FilterValues: this.getValue(data.TempBind)}
			this.templateData.ID = '';
			this.templateData.TemplateName = data.Name;
			this.templateData.TemplateNumber = data.TemplateNumber;
			this.templateData.FacePicture = data.FacePicture || data.TemplatePages[0].Thumb;
			this.templateData.StrThematic = data.StrThematic || '';
			this.templateData.Content = data.Content || '';
			this.templateData.Keywords = data.Keywords && data.Keywords.split(',') || [];
			this.templateData.filters = this.parsing(data);
			this.templateData.FilterVaules = this.reparsing(this.templateData.filters);
		} else {
			this.templateData.ID = data.SubTemplate.ID;
			this.templateData.TemplateName = data.SubTemplate.TemplateName;
			this.templateData.TemplateNumber = data.SubTemplate.TemplateNum;
			this.templateData.FacePicture = data.SubTemplate.FacePicture;
			this.templateData.StrThematic = data.SubTemplate.StrThematic;
			this.templateData.Content = data.SubTemplate.Contents;
			this.templateData.Keywords = data.SubTemplate.Keywords.split(',');
			this.templateData.filters = this.parsing(data);
			this.templateData.FilterVaules = this.reparsing(this.templateData.filters);
		}
		
		this.getNowTemplate();
		// console.log(this.FilterVaules)
		
	},
	watch: {
		bonusPoint(num) { // 监控积分
			if (num < 0) {
				this.bonusPoint = 0
			}
		},
		PageData: {
			deep: true,
			handler(val, oldval) {
				// console.log(val, oldval)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.temp-list {
	tr {
		td:first-child {
			text-align: right;
			padding: 5px 0 5px 5px;
			width: 80px;
		}
		td:last-child {
			padding: 5px 5px 5px 0;
			color:rgb(144, 147, 153);
		}
	}
}
.temp-list-item {
    display: flex;
	flex-wrap: wrap;
}

.put-template {
	position: fixed;
	left: 400px;
	top: 100px;
	width: 650px;
	overflow: hidden;
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	border-radius: 10px;
	z-index: 2019;
}

.template-content {
	display: flex;
	.info {
		flex: 1;
		.info-item {
			display: flex;
			align-items: center;
			width: 430px;
			padding: 10px;
			.item-title {
				width: 90px;
				font-size: 16px;
				text-align: right;
				margin-right: 20px;
			}
			.item-right {
				width: 73%;
			}
			
		}
	}
	.cover {
		flex: 1;
		text-align: center;
		padding: 10px;
	}
	.lable-content {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		.lable-item {
			display: inline-block;
			padding: 5px;
			margin: 5px 5px 5px 0;
			background-color: #f0f2f5;
			color: #909399;
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			.label-close {
				position: relative;
				display: inline-block;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background-color: #c0c4cc;
				overflow: hidden;
				transform: rotate(45deg);
				cursor: pointer;
				margin-left: 5px;
				&:hover {
					background-color: #909399;
				}
				&::before,
				&::after {
					content: "";
					position: absolute;
					left: 2px;
					top: 5px;
					width: 8px;
					height: 1px;
					border-radius: 1px;
					background: #fff;
				}
				&::after {
					transform: rotate(90deg);
				}
			}
		}
	}
	.lable-input {
		width: 100px;
		height: 28px;
		margin: 5px 5px 5px 0;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
	}
}
.template-bottom {
	padding: 30px;
}
.upload-progress {
	width: 100%;
	height: 26px;
	background: @color;
	border-radius: 4px;
}
.submit-btn {
		margin: auto;
		width: 200px;
		background: @color;
        border: 1px solid @color;
        margin-bottom: 10px;
		color: #fff;
		padding: 10px;
		border-radius: 3px;
		text-align: center;
        font-size: 14px;
		cursor: pointer;
        &:hover{opacity: .9;}
		&:active {
			opacity: 1;
		}
	}
.img-preivew {
	position: fixed;
	z-index: 2019;
	padding: 20px;
	left: 60px;
	top: 50px;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .3);
	overflow: auto;
	img {
		display: block;
		margin:auto;
		max-width: 100%;
	}
}
.animation-img {
	background: none;
	
}
.animation-img::-webkit-scrollbar {
	display: none;
}

/*滚动条样式*/
.model-content .admin-model-content {
    &::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 0;
    }
    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        background: rgba(0,0,0,0.3);
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0;
        background: #fff;
    }
    
}
.model-btns {
    position: absolute;
    top: 0;
    right: -80px;
}
</style>

